<template>
  <teleport to="#message">
    <div class="alert" :class="classObj" v-if="visiable" role="alert">
      <strong>{{ message }}</strong>
      <i class="el-icon-close close-btn" @click.prevent="hide"></i>
    </div>
  </teleport>
</template>
<script lang="ts" setup>
import { ref, defineProps, defineEmits } from "vue";
import useDOMCreate from "@/share/hooks/useDOMCreate";
export type MessageType = "default" | "error" | "success";
    const props = defineProps<{
      message: string,
      type: MessageType
    }>()
    const emit = defineEmits(['close-message'])
    useDOMCreate("message");
    // Class的对象绑定
    const classObj = {
      "alert-success": props.type === "success",
      "alert-warn": props.type === "default",
      "alert-error": props.type === "error",
    };
    const visiable = ref(true);
    const hide = () => {
      visiable.value = false;
        emit("close-message", true);
    };
</script>
<style lang="scss" scoped>
.alert {
  z-index: 89;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  background-color: #f4f4f5;
  padding: 8px 16px;
  line-height: 1.2em;
  border-radius: 4px;
  margin-top: 20px;
  // transition: opacity .3s, transform .4s, top .4s;
}
.close-btn {
  position: absolute;
  right: 16px;
  cursor: pointer;
}
.alert-success {
  background-color: #67c23a;
}
.alert-warn {
  background-color: #e6a23c;
}
.alert-error {
  background-color: #f56c6c;
}
</style>
